<template>
  <drawerDetail v-model="dialogVisible" title="详情页" :tabs="ruleForm.tabs">
    <template #detailSynopsis>
    </template>
    <!-- <template #operationBotton>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </template> -->
    <template #operationContent="{ type }">

      <detail :data="baseinfo" v-if="type.editableTabsValue == 1" />
    </template>
  </drawerDetail>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, watch, shallowRef } from "vue";
import drawerDetail from "/@/components/drawer/drawer.vue";
import detail from './detail.vue';
import {
  getUser,
} from "/@ts/axios/urlApi/system/user";
const emit = defineEmits(["update:modelValue"]);
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
  title: {
    type: String,
    defalut: "",
  },
  tabs: {
    type: Object,
    default: [],
  },
  id:{
    type:String,
    default:''
  }
});
const dialogVisible = shallowRef(false);
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;

  },
  {
    immediate: true,
  }
);
const getInfo = ()=>{
  getUser(props.id).then((res:ResponseConfig)=>{
    baseinfo.value = res.data;
   
  })
}
 
watch(()=> props.id,()=>{
    if(dialogVisible.value&&props.id){
       getInfo();
    }
})
 
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
const baseinfo = ref({


})

const handleClose = () => {
  emit("update:modelValue", false);
};


const ruleForm = reactive({
  tabs: [
    {
      name: "基本信息",
      type: "1",
    },
 
  ],

});

</script>

<style scoped lang="scss"></style>
